<template>
  <view class="container">
    <custom-nav title="注销账号"></custom-nav>

    <view class="content">
      <view class="l-img">
        <image src="@/subPages/static/warning.svg" mode="widthFix"></image>
      </view>
      <view class="l-text">
        我们期望为用户带来更好的使用体验，选择注销原因，帮我们把完美亲家变的更好!
      </view>

      <apply-con ref="applyConRef" :items="items"></apply-con>

      <view class="l-btn" @click="confirmFn"> <custom-btn>确定注销</custom-btn> </view>
    </view>

  </view>
</template>
 
<script setup>
import ApplyCon from "@/components/settings/apply-con.vue";
import { editUserDetail } from "@/api/my";

const applyConRef = ref();
const items = reactive([
  {
    id: 1,
    text: "孩子已在本平台找到另一半",
  },
  {
    id: 2,
    text: "孩子已脱单，正在交往中",
  },
  {
    id: 3,
    text: "暂时下架资料",
  },
  {
    id: 4,
    text: "平台功能不太会用",
  },
  {
    id: 5,
    text: "觉得平台不靠谱，不真实",
  },
  {
    id: 6,
    text: "其他原因",
  },
]);

const confirmFn = () => {
  const end_reason = applyConRef.value.checked;
  const user_info = {
    status: 2,
    end_reason,
  };
  editUserDetail({ user_info: JSON.stringify(user_info) }).then((res) => {
    uni.reLaunch({ url: "/pages/signout/index" });
  });
};
</script>
 
<style lang='scss' scoped>
@import "@/styles/global.scss";
.content {
  padding: 60rpx 50rpx;
  background: #fff;
}
.l-text {
  font-weight: 500;
  font-size: 32rpx;
  color: #666666;
  padding-bottom: 40rpx;
}
.l-img {
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto 20rpx;
  image {
    width: 100%;
    height: 100%;
  }
}

.l-btn {
  width: 650rpx;
  height: 120rpx;
  font-weight: 800;
  font-size: 36rpx;
  color: #ffffff;
  line-height: 120rpx;
  background: #f65952;
  border-radius: 120rpx;
  margin-top: 70rpx;
}
</style>